<template>
  <view class="allocationRecordMain">
	  <u-navbar title="商户详情" :background="{ background: '#fb4535' }" title-color="#fff" back-icon-color="#fff">
	    <view class="uNavBarRight" slot="right" @click="goTorateSetting">费率修改</view>
	  </u-navbar>
    <view class="machinesNumItem">
      <view class="cu-bar">
        <view class="action sub-title top">
          <text class="text-xl text-bold text-orange">{{merchantDetailData.mercNm}}-{{merchantDetailData.mercId}}</text>
          <u-icon style="margin-left:10rpx;position:relative;top:2rpx;" name="fuzhicaipin" custom-prefix="custom-icon" size="36" @tap="$tools.copyTap(merchantDetailData.mercId)"></u-icon>
          <text class="bg-orange"></text>
        </view>
      </view>
      <view class="machinesNumList">
        <u-cell-group :border="false">
			<u-cell-item
			  icon="phone"
			  title="手机号"
			  :value="phone?phone:'暂无'"
			  :arrow="false"
			  class="height"
			>
			</u-cell-item>
          <u-cell-item
            v-if="merchantDetailData.product_name"
            icon="shopping-cart"
            title="机具名类型"
            :value="merchantDetailData.product_name"
            :arrow="false"
            class="height"
          >
          </u-cell-item>
          <u-cell-item
            icon="clock"
            title="入网时间"
            :value="merchantDetailData.joinDate"
            :arrow="false"
            class="height"
          >
          </u-cell-item>
          <u-cell-item
            v-if="merchantDetailData.active_time!=null && merchantDetailData.active!='0'"
            icon="clock"
            title="激活时间"
            :value="
              $u.timeFormat(
                merchantDetailData.active_time,
                'yyyy-mm-dd hh:MM:ss'
              )
            "
            :arrow="false"
            class="height"
          >
          </u-cell-item>
          <u-cell-item
            icon="shopping-cart"
            title="累计交易额"
            :value="
              merchantDetailData.trade_amount
                ? $tools.format(merchantDetailData.trade_amount)
                : '0.00' + '元'
            "
            :arrow="false"
            class="height"
            :border-bottom="false"
          >
          </u-cell-item>
        </u-cell-group>
      </view>
    </view>

    <view class="allocationRecord">
      <view class="allocationRecordItemTop" v-if="merchantDetailData.number">
        <view class="cu-bar">
          <view class="action sub-title top">
            <text class="text-xl text-bold text-orange">{{
              merchantDetailData.number
            }}</text>
            <u-icon style="margin-left:10rpx;position:relative;top:2rpx;" name="fuzhicaipin" custom-prefix="custom-icon" size="36" @tap="$tools.copyTap(merchantDetailData.number)"></u-icon>
            <text class="bg-orange"></text>
          </view>
        </view>
        <!-- <view class="tusn">机具号</view> -->
      </view>
      <view class="allocationRecordItemSub">
        <view class="ratePart">
          <view class="rateInfo">
            <text>借记卡</text>
            <view>{{ merchantDetailData.dcpay + "%" }}</view>
          </view>
          <view class="rateInfo">
            <text>贷记卡</text>
            <view>{{ merchantDetailData.ccpay + "%" }}</view>
          </view>
          <view class="rateInfo">
            <text>银联扫码</text>
            <view>{{ merchantDetailData.cuppay + "%" }}</view>
          </view>
          <view class="rateInfo">
            <text>支付宝</text>
            <view>{{ merchantDetailData.alipay + "%" }}</view>
          </view>
          <view class="rateInfo">
            <text>微信</text>
            <view>{{ merchantDetailData.wxpay + "%" }}</view>
          </view>
          <view class="rateInfo">
            <text>借记卡封顶</text>
            <view>{{ merchantDetailData.dctop }}</view>
          </view>
          <view class="rateInfo">
            <text>T0手续费</text>
            <view>{{ merchantDetailData.t0 }}</view>
          </view>
        </view>
      </view>
    </view>

<!--    <view class="makeSure">
      <u-button
        type="error"
        :ripple="true"
        size="default"
        @click="goTorateSetting"
      >
        费率修改
      </u-button>
    </view> -->
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mercId: "",
	  phone:'1**********',
      merchantDetailData: {
        active_time: "000000",
        alipay: "0.000",
        ccpay: "0.000",
        cuppay: "0.000",
        dcpay: "0.000",
        dctop: "0.00",
        mercNm: "***",
        t0: "0.00",
        wxpay: "0.000",
        trade_amount: "16000.00",
        number: "****************",
        product_name: "************",
      },
    };
  },
  onLoad(options) {
	this.phone = options.phone
    this.mercId = options.mercId;
  },
  onShow(){
	  this.getMerchantDetail();
  },
  mounted() {},
  methods: {
    getMerchantDetail() {
      this.$u.api
        .getMerchantDetail({
          mercId: this.mercId,
        })
        .then((res) => {
          if (res.status == 200) {
            this.merchantDetailData = res.result;
          }
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },
    goTorateSetting(){
      this.$u.route({
        url:"/pages/rateChange/rateChange",
        params:{
          mercNm:this.merchantDetailData.mercNm,
          mercAgtId:this.merchantDetailData.mercId
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.allocationRecordMain {
  padding: 20rpx 30rpx;

  .allocationRecord {
    background: #fff;
    border-radius: 15upx;
    margin-bottom: 30upx;

    .allocationRecordItemTop {
      border-bottom: 2px dashed #f1f1f1;
      padding: 20rpx;
      position: relative;

      .tusn {
        position: absolute;
        left: 500rpx;
        top: 44rpx;
        height: 40rpx;
        border-radius: 8rpx;
        padding: 2rpx 4rpx;
        color: #6f84ec;
        border: 3rpx solid #6f84ec;
        background-color: #fff;
        font-weight: bold;
        font-size: 22rpx;
        font-family: din-font;
      }

      .cu-bar {
        min-height: 80rpx;
      }

      &::before {
        content: "";
        display: block;
        width: 30upx;
        height: 30upx;
        background: #f1f1f1;
        position: absolute;
        left: -15upx;
        bottom: -16upx;
        border-radius: 50%;
      }

      &::after {
        content: "";
        display: block;
        width: 30upx;
        height: 30upx;
        background: #f1f1f1;
        position: absolute;
        right: -15upx;
        bottom: -16upx;
        border-radius: 50%;
      }
    }

    .allocationRecordItemSub {
      padding: 20rpx;

      .ratePart {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;

        .rateInfo {
          position: relative;
          width: 33.33%;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          padding: 20rpx 0;

          & > text {
            color: $uni-text-color;
            padding-bottom: 14rpx;
            font-size: 28rpx;
          }

          & > view {
            font-family: din-font;
            font-size: 36rpx;
            width: 140rpx;
          }
        }
      }
    }
  }

  .machinesNumItem {
    padding: 10rpx 0;
    background-color: #fff;
    margin: 0rpx 0 20rpx;
    border-radius: 20rpx;

    .machinesNumList {
      border-radius: 20rpx;

      .height {
        padding: 16rpx 32rpx;
      }

      view {
        border-bottom: 1rpx solid #f4f6f8;
        font-size: 32rpx;
        font-family: numberFont;
        letter-spacing: 2rpx;
        color: #666;
      }

      & view:last-child {
        border-bottom: none;
      }
    }
  }

  .makeSure {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 20rpx 30rpx;

    & > button {
      width: 90%;
      background-color: #fb4535;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
    }
  }
}
.uNavBarRight {
  padding-right: 30rpx;
  color: #fff;
}
</style>
